import { useEffect } from 'react';
import { useRouter } from "next/router";
import type { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next';
import Layout from '../../components/layout'
import MainLayout from '../../components/layout/main'
import Sidbar from '../../components/layout/sidebar'

type postProps = {
  desc: string
}
type listItem = {
  id: string
}
const Post = ({ desc }:postProps) => {
  const router = useRouter();
  const { id } = router.query;
  // console.log(router);
  return (
    <div>
      <p>Post: {id}</p>
      <p>{ desc }</p>
    </div>
  );
}

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch(`http://localhost:3000/api/detail/list`)
  const { list } = await res.json()
  const paths = list.map((item: listItem) => ({
    params: { id: item.id },
  }))
  return {
    paths,
    fallback: false 
  }
}

export const  getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`http://localhost:3000/api/detail/${params.id}`)
  const desc = await res.json()
  return {
    props: {
      desc: desc.desc
    },
  }
}
// export const  getServerSideProps: GetServerSideProps = async ({ params }) => {
//   const res = await fetch(`http://localhost:3000/api/detail/${params.id}`)
//   const desc = await res.json()
//   return {
//     props: {
//       desc: desc.desc
//     },
//   }
// }

export default Post;

Post.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <MainLayout>
        <Sidbar>
          {page}
        </Sidbar>
      </MainLayout>
    </Layout>
  )
}
